<script setup lang="ts">
import EarlyWarningTickets from '@/components/EarlyWarningTickets/index.vue';
import { MapData } from '@/types/MapData';

const props = defineProps<{
  mapData: MapData;
}>();

enum WarningLevel {
  VerySevere = '1', // 特别严重
  Severe = '2', // 严重
  RelativelySevere = '3', // 较重
  General = '4' // 一般
}

const EarlyWarningUrl = ref<string>('');
const EarlyWarningTicketsRef = ref();
//查询预警工单
const goAlarmWork = (url: string) => {
  EarlyWarningUrl.value = url;
  EarlyWarningTicketsRef.value.open();
};
const WarningLevelName = computed(() => {
  switch (props.mapData.info.warningLevel) {
    case WarningLevel.VerySevere:
      return '特别严重';
    case WarningLevel.Severe:
      return '严重';
    case WarningLevel.RelativelySevere:
      return '较重';
    case WarningLevel.General:
      return '一般';
  }
});
const WarningLevelColor = computed(() => {
  switch (props.mapData.info.warningLevel) {
    case WarningLevel.VerySevere:
      return '#ff7070';
    case WarningLevel.Severe:
      return '#ffb444';
    case WarningLevel.RelativelySevere:
      return '#fff780';
    case WarningLevel.General:
      return '#00ffff';
  }
});
</script>

<template>
  <div class="card-box">
    <el-row :gutter="10">
      <el-col :span="24">
        <el-descriptions :column="2" class="largeScreen-descriptions">
          <el-descriptions-item label="预警类型">{{ mapData.info.typeName }}</el-descriptions-item>
          <el-descriptions-item label="预警等级">
            <span :style="{ 'color': WarningLevelColor }">
              {{ WarningLevelName }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="处置状态">
            <span>{{ mapData.info.statusName }}</span>
            <el-button type="primary" @click="goAlarmWork(mapData.info.workOrderInfoUrl)">查看预警工单</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="发生时间">{{ mapData.info.createTime }}</el-descriptions-item>
          <el-descriptions-item label="持续时间">{{ mapData.info.durationTime }}</el-descriptions-item>
          <el-descriptions-item label="位置">{{ mapData.info.occurrenceAddress }}</el-descriptions-item>
        </el-descriptions>
      </el-col>
    </el-row>
    <EarlyWarningTickets ref="EarlyWarningTicketsRef" :alarm-work-order-url="EarlyWarningUrl" />
  </div>
</template>

<style scoped lang="scss">
.card-box {
  min-width: 200px;
}
</style>
